<template>
	<view style="padding-top:0rpx;">
		<view class="date" @click="dateShow">
			<view><u-icon color="#999" name="calendar-fill" :size="22"></u-icon>{{$u.timeFormat(date, 'yyyy-mm-dd')}}</view>
			<u-icon color="#999" name="arrow-right" :size="22"></u-icon>
		</view>
		
		<view id="mapPosition" style="height:800rpx;margin-top:20rpx;">
			
		</view>
		<u-datetime-picker
		        :show="showTime"
		        v-model="date"
		        mode="date" @cancel="showTime=false" @confirm="dateConfirm"
		></u-datetime-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTime:false,
				date: Number(new Date()),
				deviceId:"",
				locationInfo:[],
			}
		},
		onLoad(e){
		
			this.deviceId = e.id;
			this.date =  parseFloat(e.date);
			this.locationList();
			
		},
		methods: {
			dateConfirm(e){
				console.log(e)
				this.date = new Date(e.value);
				this.showTime=false;
				this.locationList();
			},
			dateShow(){
				this.showTime=true;
			},
			getPosition(){
				
				let bmap = new BMapGL.Map("mapPosition");
				bmap.enableScrollWheelZoom();
				if(this.locationInfo.length<=0){
					  bmap.centerAndZoom("成都",12);
					return;
				}
				console.log(bmap, 'this.map ')
				let point = new BMapGL.Point(this.locationInfo[0].longitude, this.locationInfo[0].latitude);
				bmap.centerAndZoom(point, 12); //设置缩放级别		
				
				let mar = [];
				for(let i in this.locationInfo){
					let dat = this.locationInfo[i];
					mar.push(new BMapGL.Point(dat.longitude,dat.latitude))
				}
				var polyline = new BMapGL.Polyline(mar, {strokeColor:"#ec7f42", strokeWeight:3, strokeOpacity:0.5});
				bmap.addOverlay(polyline);
				
			},
			
			locationList(){
				let day = this.$u.timeFormat(this.date, 'yyyy-mm-dd')
				uni.showLoading({
					title:"加载中..."
				})
				this.$http.locationList({id:this.deviceId,day:day}).then(res=>{
					uni.hideLoading();
					if(res.code==0){
						console.log(res)
						this.locationInfo=res.list;
						this.getPosition();
						
					}
					
				})
			}
		}
	}
</script>

<style scoped>
	.date{
		margin:0 30rpx;
		display: flex;
		align-items: center;
		padding:0 10rpx 0 20rpx;
		background:#fff;
		border-radius: 20rpx;
		height:80rpx;
		color:#999;
		margin-top:30rpx;
		font-size:30rpx;
		justify-content: space-between;
	}
	.date view{
		display: flex;
		align-items: center;
	}
</style>
